<script setup>
	const leftBar_list = [{
		id: 0,
		type: 'home',
		name: '主屏幕',
		url: '/pages/index/index'
	}, {
		id: 1,
		type: 'videocam',
		name: '多媒体播放',
		url: '/pages/music/music'
	}, {
		id: 2,
		type: 'contact',
		name: '天气',
		url: '/pages/weather/weather'
	}, {
		id: 3,
		type: 'cart',
		name: '车辆信息',
		url: '/pages/car_info/car_info'
	}]
	const goDetail = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>
<template>
	<view class="box">
		<view class="leftBar">
			<view v-for="(item,index) in leftBar_list" :key="item.id" class="leftBar_item" @click="goDetail(item.url)">
				<view>
					<uni-icons :type=item.type size="100" color="#fff"></uni-icons>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="rightWindows">
			<view class="car_info">
				<image class="car" src="../../static/img/car.png"></image>
				车辆信息
			</view>
			<view>

			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		width: 3840rpx;
		height: 2160rpx;
		background-color: #333333;
		position: relative;

		.leftBar {
			left: 200rpx;
			top: 280rpx;
			width: 380rpx;
			height: 1600rpx;
			color: #fff;
			background-color: #555555;
			border-radius: 48rpx;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			text-align: center;
		}

		.rightWindows {
			left: 740rpx;
			top: 288rpx;
			width: 2600rpx;
			height: 1586rpx;
			background-color: #55555500;
			border-radius: 48rpx;
			position: absolute;

			.car_info {
				left: 0rpx;
				top: 0rpx;
				width: 2360rpx;
				height: 762rpx;
				color: #fff;
				background-color: #55555580;
				border-radius: 48rpx;
				font-size: 100rpx;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.car {
					width: 580rpx;
					height: 1160rpx;
					border-radius: 48rpx;
					transform: rotate(90deg);
				}
			}
		}
	}
</style>